<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page import="com.asiainfo.util.SessionInfoUtil"%>
<%@page import="com.asiainfo.bean.UserSessionBean"%>
<%
    String path = request.getContextPath();
    UserSessionBean userSessBean = SessionInfoUtil.getUserSessBean(request.getSession());
    if(userSessBean == null){
		String str = "<script>"
				 +"window.location.href='"+path+"/indexController/index.do'"
		           + "</script>";
		response.getWriter().write(str);
		return;
	}else{ 
		request.setAttribute("userSessBean", userSessBean);
	}
 

%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>分析</title>
<link href="<%=path%>/view/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="<%=path%>/view/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<style>
.title{
	width:100%;
	position:absolute;
	top:0;
	background-color:#3cc;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
}
.container{
	margin-top:60px;
}
.head{
	height:20px;
	line-height:20px;
}
.huanyin{
	text-align:center;
	height:20px;
	line-height:20px;
	width:250px;
	float:left;
}
.exit{
	text-align:center;
	height:20px;
	line-height:20px;
	width:100px;
	float:left;
}
#xiangqing{
	text-align:center;
	height:20px;
	line-height:20px;
	font-size:12px;
	z-index:99;
}
.consumption{
	margin-top:10px;
}

</style>
</head>
<body>
<div class="title">
	<h3>掌上电信业务助手</h3>
</div>
<div class="container">
	<div class="head">
		<div class="row">
			<div class="huanyin col-sm-3 col-sm-offset-2 col-xs-3 collapsed" data-toggle="collapse" data-target="#xiangqing">
				<p>欢迎您，<a id="username"><%=userSessBean.getUserName()%></a></p>
			</div>
			<div class="exit col-sm-2 col-sm-offset-3 col-xs-3">
				<span><a onclick="loginout()" id="loginout">退出</a></span>
			</div>
		</div>
		<div id="xiangqing" class="collapse col-sm-8 col-sm-offset-2">
			<div  class="row">
				<div class="col-sm-3">
					号码:<span id="number"><%=userSessBean.getPhone()%></span>
				</div>
				<div class="col-sm-3">
					归属地:<span id="address"><%=userSessBean.getCityName()%></span>
				</div>
				<div class="col-sm-3">
					运营:<span id="operator"><%=userSessBean.getOperatorName()%></span>
				</div>
				<div class="col-sm-3">
					话费余额:<span id="money"><%=userSessBean.getReal_time_balance()%>元</span>
				</div>
			</div>
		</div>
	</div>	
	<div class="consumption col-sm-8 col-sm-offset-2 col-xs-12">
		<div class="panel panel-success">
			<div class="panel-heading">
				<div class="row">
					<h4 class="col-sm-10 col-xs-10">图表分析</h4>
					<button type="button" class="btn btn-default col-sm-1 col-xs-2" onclick="back()" style="margin-top:5px;"><span aria-hidden="true" style="height:15px;line-height:15px;">返回</span></button>
				</div>
			</div>
			<div class="panel-body">
				<div id="charts" style="width: 100%;height: 250px;">
				
				</div>
				
			</div>
		</div>
		<div class="panel panel-success">
			<div class="panel-heading">
				<h4 class="recommend">平均使用情况</h4>
			</div>
			<div class="panel-body">
				<div class="row" style="font-size:12px;">
					<div class="col-sm-4 col-xs-4" style="text-align:left;padding-right:0;">通话：<span>${Avg_call_use}</span>min</div>
					<div class="col-sm-4 col-xs-4" style="text-align:left;padding-right:0;">流量：<span>${Avg_data_use}</span>M</div>
					<div class="col-sm-4 col-xs-4" style="text-align:left;padding-right:0;">短信：<span>${Avg_message_use}</span>条</div>
				</div>
			</div>
		</div>
		<div class="panel panel-success">
			<div class="panel-heading">
				<h4 class="recommend">推荐套餐</h4>
			</div>
			
			<div class="panel-body">
				<ul class="list-group">
                
                    <c:forEach items="${recommendMealList}" var="recommend">
	                <li class="list-group-item"><a href="#">${recommend.menu_name}</a></li>
	
	                </c:forEach>
					
				</ul>
			</div>
		</div>
	</div>
</div>
<input id="month" value="" style="display:none"/>
<input id="month" value="" style="display:none"/>
<input id="month" value="" style="display:none"/>
<script type="text/javascript" src="<%=path%>/view/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/echarts.min.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script type="text/javascript">
	var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > - 1 || u.indexOf('Adr') > -1;
	var isiOS = u.indexOf('iPhone') > - 1 || u.indexOf('Mac OS X') > -1;
	
	var dom = document.getElementById("charts");
	var myChart = echarts.init(dom);
function drawChart(){
	var base = +new Date(2015, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [];

   <c:forEach items="${billCostList}" var="bill">
	date.push("${bill.month}");
	   
	data.push("${bill.billtotal}");
	</c:forEach>




option = {
    title: {
        show: false
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: date
        }
    ],
    yAxis: [
        {
            type: 'value',
            max: 200
        }
    ],
    dataZoom: {
        type: 'inside',
        start: 60,
        end: 80
    },
    series: [
        {
            name:'成交',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
                normal: {}
            },
            data: data
        }
    ]
};
	myChart.setOption(option, true);
}
	
	drawChart();
	function setAndroidBg(){
		var colorObj = document.getElementById("colorId");
		var cvalue = colorObj.options[ colorObj.selectedIndex].value;
		
		if(isiOS){
			changeBGColor(cvalue);
		}else if(isAndroid){
			window.JsTest.setBackgroundColor(cvalue);
		}

	}
</script>

<script type="text/javascript">
function back(){
	window.location.href = "<%=path%>/myBillController/myBillView.do";
}
</script>
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</body>
</html>


